<template>
  <div class="CreateTask-panel">
    <el-dialog v-model="State.isOpenCreate" @close="ExitDismountingPanel">
      <h2>创建比赛</h2>
      <el-form ref="ruleForm">
        <div class="CreateTask-panel-two">
          <div class="title-one">实训模块</div>
          <el-select v-model="State.selectModuleValue" class="m-2" size="large" style="width: 320px; margin-left: 12px;"
            @change="handleChange">
            <!-- <el-option v-for="item in State.AllDismountingFault.systems" :key="item" :label="item" :value="item" /> -->
            <el-option v-for="item in State.taskModule" :key="item" :label="item" :value="item" />
          </el-select>
          <div class="classTime">
            <div class="title">比赛时长</div>
            <el-input v-model="State.matchTime" autocomplete="off" class="CreateTask-time-input"
              style="width: 76px; margin-left: 13px;"></el-input>
          </div>
          <div class="CreateMath-Time-Panel">
            <el-form :inline="true" :model="State.starttime" ref="starttime" :rules="rules">
              <el-form-item label="开始时间" prop="starttime">
                <el-date-picker v-model="State.starttime" :disabled-date="disabledDate" type="datetime"
                  placeholder="选择日期时间" @change="ConversionTime"></el-date-picker>
                <!-- <a-date-picker v-model:value="State.starttime" format="YYYY-MM-DD HH:mm:ss"
                  :disabled-date="disabledDate" :disabled-time="disabledDateTime"
                  :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }" placeholder="请选择开始时间"
                  style="width: 100%;" @change="onChange" :locale="locale" /> -->
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-form>
      <div class="content">
        <div class="content-left">
          <div class="CreateTask-search-div">
            <input class="searchInput" v-model="iptContent" />
            <button class="searchBtn" @click="SearchAll">
              <Search style="width: 1em; height: 1em;" />
            </button>
          </div>
          <div class="selectModel">
            <div class="CreateTask-panel-faultcount" @click="ShowAllfault"
              :class="State.allfalutColor ? 'CreateTask-active' : ''">
              <span>全部({{ State.allFalutCount }})</span>
            </div>
            <div class="currentSelect" @click="ShowAllSelectfault"
              :class="State.selectColor ? 'CreateTask-active' : ''">
              <span>已选({{ State.SelectfaultCount }})</span>
            </div>
            <div class="CreateTask-panel-faulttype">
              <el-scrollbar class="infinite-list">
                <div class="CreateTask-faulttype-moder" v-for="(its, indexs) in State.SideTaskType" :key="indexs"
                  @click="SelectFaultType(its, indexs)"
                  :class="State.SelectedIndex === indexs ? 'CreateTask-active' : ''">
                  <span class="CreateTask-span-name">{{ its }}({{ State.faultSelectNum[indexs] }})</span>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
        <div class="content-right">
          <div class="CreateTask-panel-faultpoint">
            <el-scrollbar class="infinite-list">
              <div class="CreateTask-faultpoint-moder" v-for="(its, indexs) in State.AllTaskName" :key="indexs"
                @click="SelectFault(its, indexs)"
                :class="{ 'CreateTask-fault-active': State.faultSelect.indexOf(its) != -1 }">
                <span class="CreateTask-fault-name">{{ its.name }}</span>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="CreateTask-fault-btn">
        <el-button class="CreateTask-fault-button-one" @click="ConfirmDismounting">确定</el-button>
        <el-button class="CreateTask-fault-button-two" @click="ExitDismountingPanel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, reactive, watch, toRef, toRefs, onMounted, ref, nextTick } from "vue";
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { postData } from "@/assets/js/pubilcs.js";
import { dateToFormat } from "@/assets/js/pubilcs.js";
const iptContent = ref()
export default defineComponent({
  name: "CreateDismountingMath",
  components: {
    Search,
  },
  props: {
    isOpenCreate: {
      type: Boolean,
      default: false,
    },
    AllDismountingFault: {
      type: Array,
      default: () => [],
    },
    MathItem: {
      type: Object,
      default: {},
    },
  },
  setup(props, ctx) {
    let State = reactive({
      // 控制拆装面板是否打开
      isOpenCreate: false,
      allfalutColor: false,
      selectColor: false,
      // 当前组卷故障信息
      AllDismountingFault: [],
      // 选择的实训模块值
      selectModuleValue: '',
      // 实训模块
      taskModule: [],
      // 所点击的那一行组卷的信息
      MathItem: {},
      // 比赛时长
      matchTime: 0,
      // 开始时间
      starttime: '',
      // 故障点
      AllTaskName: [],
      // 左侧系统
      SideTaskType: [],
      // 选中的故障点
      faultSelect: [],
      // 选中的数目
      faultSelectNum: [],
      // 已选故障总数
      SelectfaultCount: 0,
      // 全部故障总数
      allFalutCount: 0,
      // 选中故障type的index
      SelectedIndex: -1,
      // 全部文字颜色
      allfalutColor: false,
      // 已选文字颜色
      selectColor: false,
      // 所有选中的故障码
      AllfaultSelectCode: '',
    })

    // 组卷面板的显示
    watch(() => props.isOpenCreate, (val, old) => {
      console.log('------------', val, old);
      State.isOpenCreate = val
    },
      { deep: true }
    )
    //所有的比赛故障
    watch(() => props.AllDismountingFault, (val, old) => {
      State.MathItem = props.MathItem
      State.matchTime = State.MathItem.duration
      State.starttime = State.MathItem.startTime
      State.AllDismountingFault = val
      State.taskModule = []

      console.log('State.AllDismountingFault', State.AllDismountingFault);

      State.AllDismountingFault.forEach((item) => {
        console.log('--------------', item.module);
        State.taskModule.push(item.module)
        console.log('实训模块：', State.taskModule);
        State.selectModuleValue = State.taskModule[0]
        State.SideTaskType = item.systems

        State.SideTaskType.forEach((item, index) => {
          State.faultSelectNum[index] = 0
        });
        //所有的故障码
        for (let i = 0; i < item.projectGroups.length; i++) {
          State.AllTaskName.push(item.projectGroups[i])
          State.allFalutCount = item.projectGroups.length
        }
      });

      //判断是不是组卷
      if (State.MathItem.content === '') {
        console.log('dianjidezujuan');
        // HandleAllFault()
      } else {
        console.log('bianji111111');
        //组卷进行操作
        State.AllfaultSelectCode = State.MathItem.content
        //切割code码
        let codearr = State.MathItem.content.split(",")
        State.SelectfaultCount = codearr.length
        //临时存储所有的故障码
        let Alltaskname = []
        console.log('State.AllDismountingFault', State.AllDismountingFault);
        for (let i = 0; i < State.AllDismountingFault.length; i++) {
          for (let j = 0; j < State.AllDismountingFault[i].projectGroups.length; j++) {
            Alltaskname.push(State.AllDismountingFault[i].projectGroups[j])
          }
        }
        //清空所有的信息
        State.faultSelect = []
        State.AllTaskName = []
        State.SelectfaultCount = 0
        //储存已选中的故障码以及显示的故障码
        for (let i = 0; i < codearr.length; i++) {
          for (let j = 0; j < Alltaskname.length; j++) {
            if (codearr[i] === Alltaskname[j].code) {
              State.faultSelect.push(Alltaskname[j])
              State.AllTaskName.push(Alltaskname[j])
            }
          }
        }
        //显示故障总数与各个的故障数
        for (let i = 0; i < State.faultSelect.length; i++) {
          for (let j = 0; j < State.AllDismountingFault.length; j++) {
            for (let k = 0; k < State.AllDismountingFault[j].systems.length; k++) {
              if (State.faultSelect[i].system === State.AllDismountingFault[j].systems[k]) {
                State.faultSelectNum[k] += 1
                State.SelectfaultCount += 1
              }
            }
          }
        }
        ShowAllSelectfault()
        State.SelectedIndex = -1
      }
    },
      { deep: true }
    )

    //处理传过来的故障数组与数据
    // function HandleAllFault() {
    //   for (let i = 0; i < State.AllDismountingFault.length; i++) {
    //     for (let j = 0; j < State.AllDismountingFault[i].projectGroups.length; j++) {
    //       State.AllTaskName.push(State.AllDismountingFault[i].projectGroups[j])
    //     }
    //   }
    //   // for (let i = 0; i < State.AllDismountingFault.length; i++) {
    //   //   State.FaultErrorCount[i] = 0
    //   // }
    //   // State.OldAllTaskName = State.AllTaskName
    // }
    // 禁用当前秒数的函数
    const disabledDate = (time) => {
      return time.getTime() < new Date() - 3600 * 1000 * 24
    };
    function SelectFault(value, index) {
      console.log('value: ', value, index);

      if (State.faultSelect.indexOf(value) !== -1) {
        for (let i = 0; i < State.SideTaskType.length; i++) {
          if (value.system === State.SideTaskType[i]) {
            State.faultSelectNum[i] -= 1
            State.faultSelect.splice(State.faultSelect.indexOf(value), 1);
            State.SelectfaultCount = State.faultSelect.length
          }
        }
      } else {
        for (let i = 0; i < State.AllDismountingFault.length; i++) {
          for (let j = 0; j < State.AllDismountingFault[i].systems.length; j++) {
            console.log('value.system', value.system);
            console.log('State.AllDismountingFault[i].systems[j]', State.AllDismountingFault);
            if (value.system === State.AllDismountingFault[i].systems[j]) {
              if (State.AllDismountingFault[i].multiSelect) {
                if (State.faultSelectNum[j] < 10) {
                  State.faultSelectNum[j] += 1
                  console.log('State.faultSelectNum[j]', State.faultSelectNum, j, State.faultSelectNum[j]);
                  State.faultSelect.push(value);
                  State.SelectfaultCount = State.faultSelect.length
                } else if (State.faultSelectNum[j] >= 10) {
                  ElMessage.error('该故障类型最多只能选取10个故障')
                }
              } else {
                if (State.faultSelectNum[j] < 1) {
                  State.faultSelectNum[j] += 1
                  State.faultSelect.push(value);
                  State.SelectfaultCount = State.faultSelect.length
                } else if (State.faultSelectNum[j] >= 1) {
                  ElMessage.error('该故障类型最多只能选取1个故障')
                }
              }
            }
          }
        }
      }

      let faultSelectString = []
      for (var i = 0; i < State.faultSelect.length; i++) {
        faultSelectString.push(parseInt(State.faultSelect[i].code))
      }
      State.AllfaultSelectCode = faultSelectString.toString()
      console.log('选中的故障码：', State.AllfaultSelectCode);
    }
    function ShowAllSelectfault() {
      State.selectColor = true
      State.allfalutColor = false
      console.log('点击了已选');
      let projectsarr = []
      for (let i = 0; i < State.faultSelect.length; i++) {
        projectsarr.push(State.faultSelect[i])
      }
      // State.SimulationTasksInformation.AllTaskName = projectsarr
      State.AllTaskName = projectsarr
      //显示所有已选故障总数
      // State.SelectfaultCount = State.faultSelect.length
    }
    function ShowAllfault() {
      State.allfalutColor = true
      State.selectColor = false
      console.log('点击了全部故障');
      let allfalut = []
      for (let i = 0; i < State.AllDismountingFault.length; i++) {
        for (let j = 0; j < State.AllDismountingFault[i].projectGroups.length; j++) {
          allfalut.push(State.AllDismountingFault[i].projectGroups[j])
          State.allFalutCount = allfalut.length
        }
      }
      State.AllTaskName = allfalut
      // 点击全部的时候模块的index为0
      State.SelectedIndex = -1
    }
    function SelectFaultType(item, indexs) {
      console.log('item: ', item, 'index: ', indexs);
      State.selectColor = false
      State.allfalutColor = false
      sessionStorage.setItem('indexs', indexs)
      // //选择的样式
      State.SelectedIndex = indexs
      // //所有的种类
      // State.SimulationTasksInformation.AllTaskName = State.SimulationTasksInformation.AllTaskTypeName[indexs].projects
      State.AllTaskName = []
      State.AllDismountingFault.forEach(ele => {
        ele.projectGroups.forEach(element => {
          if (element.system == item) {
            State.AllTaskName.push(element)
          }
        });
      });
    }
    function SearchAll() {
      console.log('点击了搜索');
      if (!iptContent.value) {
        ElMessageBox.alert('请输入搜索内容', '提示', {
          confirmButtonText: '确定',
        })
      } else {
        let data = [];
        for (let i = 0; i < State.AllDismountingFault.length; i++) {
          if (State.selectModuleValue == State.AllDismountingFault[i].module) {
            for (let j = 0; j < State.AllDismountingFault[i].projectGroups.length; j++) {
              if (State.AllDismountingFault[i].projectGroups[j].name.indexOf(iptContent.value) !== -1) {
                data.push(State.AllDismountingFault[i].projectGroups[j]);
              }
            }
          }
        }
        State.AllTaskName = []
        data.forEach(item => {
          State.AllTaskName.push(item)
        });
      }
    }

    //处理选择的时间
    function ConversionTime(data) {
      State.starttime = dateToFormat(data)
    }

    // 退出组卷
    function ExitDismountingPanel() {
      ctx.emit("ExitDismountingPanel", false)
      State.AllTaskName = []
      State.allFalutCount = 0
      State.faultSelect = []
      State.SelectfaultCount = 0
      State.faultSelectNum = [0]
      iptContent.value = ''
      State.selectColor = false
      State.allfalutColor = false
    }
    function ConfirmDismounting() {
      if (!State.faultSelect) {
        ElMessage.error('实训故障没有选择')
        return
      }
      if (State.matchTime == 0) {
        ElMessage.error('请填写具体比赛时长')
        return
      }

      //编辑
      postData("/api/SkillsContest/EditSCInformation", JSON.stringify(
        { name: State.MathItem.name, startTime: State.starttime, duration: State.matchTime, content: State.AllfaultSelectCode, id: State.MathItem.id }), sessionStorage.getItem("token")).
        then(function (rep) {
          if (rep.result.result) {
            console.log('确定----------', rep)
            // State.AllformInline[State.MathIndex] = rep.result.result
            //传送给父组件最新的数据
            //  ctx.emit("SetAllformInline",State.AllformInline)
            ctx.emit("GetAllformInline")
            ElMessage({
              message: '操作成功',
              type: 'success',
            })
            State.isOpenCreate = false
          }
        })
        .catch((error) => {
          console.log('确定错误', error)
        });
      iptContent.value = ''
    }
    onMounted(() => {
    });

    return {
      iptContent,
      State,
      SelectFault,
      ShowAllSelectfault,
      ShowAllfault,
      SelectFaultType,
      SearchAll,
      ExitDismountingPanel,
      ConfirmDismounting,
      ConversionTime,
      dateToFormat,
      disabledDate,
    };
  },
});
</script>

<style lang="less" scoped>
.searchInput {
  width: 222px;
  height: 42px;
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  outline: none;
  text-align: center;
}

.searchBtn {
  width: 42px;
  height: 42px;
  color: white;
  border: none;
  border-radius: 5px;
  background-color: #0974d8;
  font-size: 21px;
  padding-top: 6px;
}

.CreateTask-panel {
  width: 100%;
  height: 100%;
}

.CreateTask-panel {
  width: 1200px !important;
  height: 840px;
  border-radius: 15px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

/deep/ .el-dialog {
  width: 1200px !important;
  height: 840px;
  border-radius: 15px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

// .CreateTask-panel .el-dialog__title {
//   position: absolute;
//   left: 20px;
//   font-family: Source Han Sans CN;
//   font-weight: 400;
//   color: #81859c;
//   font-size: 22px;
// }

.el-dialog__headerbtn {
  font-size: 22px;
}

.CreateTask-panel .el-form-item__label {
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
  font-size: 18px;
}


.CreateTask-panel-one .el-form-item,
.CreateTask-panel-two .el-form-item {
  margin-bottom: 0px;
  width: 281px;
}

.taskType {
  display: flex;
}

.classTime {
  display: flex;
}

.title-one {
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
  font-size: 0.09375rem;
}

.title {
  margin-left: 50px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
  font-size: 0.09375rem;
  line-height: 42px;
}

.el-input__inner {
  text-align: center;
}

.CreateTask-panel .el-form-item__content .el-input__inner {
  font-family: Source Han Sans CN;
  font-weight: 400;
  width: 100%;
  color: #81859c;
  position: relative;
  text-align: start;
}

.el-input__inner::before {
  position: absolute;
  width: 20px;
  height: 30px;
  content: "分钟";
  top: 10%;
  left: 10%;
  background: #3d8ef1;
}

.CreateTask-panel-one,
.CreateTask-panel-two {
  display: flex;
  align-items: center;
}

.CreateTask-panel-one>div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 778px;
  height: 42px;
}

.CreateTask-panel-one>div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 51px;
}

.CreateTask-panel-two>div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.CreateTask-panel-two>div:nth-child(2) {
  align-items: center;
  justify-content: center;
}

.CreateTask-panel-two {
  margin-top: 30px;
}

.content {
  background-color: #f3f5fb;
  width: 1200px;
  height: 531px;
  margin-left: -20px;
  margin-top: 20px;
  display: flex;
  position: relative;
  border: 1px solid #DADBDE;
}

.content-left {
  width: 300px;
  height: 100%;
}

.selectModel {
  width: 265px;
  height: 407px;
  background: #FFFFFF;
  border-radius: 5px;
  border: 1px solid #DADBDE;
  position: absolute;
  top: 93px;
  left: 28px;
  padding: 24px 19px;
  text-align: left;
}

.currentSelect {
  font-size: 18px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #81859c;
  margin-bottom: 13px;
  cursor: pointer;
}

.content-right {
  width: 900px;
  height: 100%;
}

.CreateTask-panel-faultcount {
  width: 100%;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 13px;
}

.CreateTask-panel-faulttype {
  width: 180px;
}

.DAA {
  top: 200px;
}

.CreateTask-panel-faulttype .infinite-list {
  position: absolute;
  width: 100%;
  height: 100%;
}

.CreateTask-panel-faulttype .el-scrollbar__wrap {
  overflow-x: hidden;
}

.CreateTask-panel-faulttype .CreateTask-faulttype-moder {
  width: 100%;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 13px;
}


.CreateTask-panel-faultpoint {
  position: absolute;
  top: 27px;
  width: 75%;
  height: 95%;

}

.CreateTask-panel-faultpoint .infinite-list {
  position: absolute;
  width: 100%;
  height: 100%;
}

.CreateTask-panel-faultpoint .el-scrollbar__wrap {
  overflow-x: hidden;
}

.CreateTask-panel-faultpoint .el-scrollbar__view {
  display: flex;
  flex-wrap: wrap;
}

// /deep/.el-scrollbar__view {
//   text-align: center;
// }
.CreateTask-faultpoint-moder {
  width: 415px;
  height: 45px;
  line-height: 45px;
  border-radius: 5px;
  background-color: #ffffff;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  margin-top: 20px;
  margin-left: 20px;
  cursor: pointer;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
  font-size: 15px;
  border: 1px solid #DADBDE;
  display: inline-block;
  float: left;
}

.CreateTask-faultpoint-moder:nth-child(1) {
  margin-top: 0px;
}

.CreateTask-faultpoint-moder:nth-child(2) {
  margin-top: 0px;
}

.CreateTask-panel-two .el-form-item .CreateTask-panel-two-KaoHe {
  width: 200px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.CreateTask-panel-two-KaoHe>div:nth-child(1),
.CreateTask-panel-two-KaoHe>div:nth-child(2) {
  width: 111px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 5px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}

.CreateTask-fault-btn {
  position: absolute;
  bottom: 30px;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.CreateTask-fault-btn .el-button {
  width: 200px;
  height: 60px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}

.CreateTask-fault-btn .el-button:nth-child(1) {

  background: linear-gradient(-90deg, #0974d8, #3d8ef1, #7c7ff8);
  color: #FFFFFF;
}

.CreateTask-fault-btn .el-button:nth-child(2) {
  background: #81859C;
  color: #FFFFFF;
}

.CreateTask-panel-two-KaoHe-active {
  cursor: pointer;
  color: #FFFFFF !important;
  background: linear-gradient(-90deg, #0974D8, #3D8EF1, #7C7FF8) !important;
}

.CreateTask-panel-two-KaoHe-noactive {
  cursor: pointer;
  color: #FFFFFF;
  background: #81859C;
}

.CreateTask-active {
  color: #0974d8 !important;
}

.CreateTask-active::before {
  color: #0974d8;
}

.CreateTask-fault-active {
  color: #FFFFFF;
  background: linear-gradient(-90deg, #0974D8, #3D8EF1, #7C7FF8);
}

.CreateTask-search-div {
  position: absolute;
  height: 42px;
  left: 28px;
  top: 27px;
  display: flex;
}

.CreateTask-panel .CreateTask-time-input::before {
  position: absolute;
  width: 100px;
  height: 60px;
  content: "分钟";
  top: 0px;
  left: 55px;
}

.CreateTask-panel-two .el-form-item {
  margin-bottom: -10px;
}

.el-select .el-input__inner {
  text-align: left;
}

.el-message-box__content {
  text-align: center;
}

.CreateMath-Time-Panel {
  margin-left: 82px;
  width: auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

h2 {
  position: absolute;
  font-size: 35px;
  top: 25px;
  font-weight: 500;
  left: 520px;
}
</style>